	<script type="text/javascript">
		function showGroup(){
			$('#tt').propertygrid({
				showGroup:true
			});
		}
		function hideGroup(){
			$('#tt').propertygrid({
				showGroup:false
			});
		}
		function hideHeader(){
			$('#tt').propertygrid({
				showHeader:false
			});
		}
		function getChanges(){
			var s = '';
			var rows = $('#tt').propertygrid('getChanges');
			for(var i=0; i<rows.length; i++){
				s += rows[i].name + ':' + rows[i].value + ',';
			}
			alert(s)
		}
	</script>

	<h2>属性表格 - PropertyGrid</h2>
	<div class="demo-info">
	  <div class="demo-tip icon-tip"></div>
		<div>单击行改变属性值。<br>
		</div>
	</div>
	
	<div style="margin:10px 0">
		<a href="#" class="easyui-linkbutton" onclick="showGroup()">ShowGroup</a>
		<a href="#" class="easyui-linkbutton" onclick="hideGroup()">HideGroup</a>
		<a href="#" class="easyui-linkbutton" onclick="hideHeader()">HideHeader</a>
		<a href="#" class="easyui-linkbutton" onclick="getChanges()">GetChanges</a>
	</div>
	
	<table id="tt" class="easyui-propertygrid" style="width:300px"
			data-options="url:'documentation/propertygrid_data.json',showGroup:true,scrollbarSize:0"></table>
<h3>页面代码： </h3>
<pre name="code" class="html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot;&gt;
	&lt;title&gt;PropertyGrid - jQuery EasyUI Demo&lt;/title&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../themes/icon.css&quot;&gt;
	&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;demo.css&quot;&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script type=&quot;text/javascript&quot;&gt;
		function showGroup(){
			$('#tt').propertygrid({
				showGroup:true
			});
		}
		function hideGroup(){
			$('#tt').propertygrid({
				showGroup:false
			});
		}
		function hideHeader(){
			$('#tt').propertygrid({
				showHeader:false
			});
		}
		function getChanges(){
			var s = '';
			var rows = $('#tt').propertygrid('getChanges');
			for(var i=0; i&lt;rows.length; i++){
				s += rows[i].name + ':' + rows[i].value + ',';
			}
			alert(s)
		}
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;属性表格 - PropertyGrid&lt;/h2&gt;
	&lt;div class=&quot;demo-info&quot;&gt;
	  &lt;div class=&quot;demo-tip icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;单击行改变属性值。&lt;br&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div style=&quot;margin:10px 0&quot;&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;showGroup()&quot;&gt;ShowGroup&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;hideGroup()&quot;&gt;HideGroup&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;hideHeader()&quot;&gt;HideHeader&lt;/a&gt;
		&lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; onclick=&quot;getChanges()&quot;&gt;GetChanges&lt;/a&gt;
	&lt;/div&gt;
	
	&lt;table id=&quot;tt&quot; class=&quot;easyui-propertygrid&quot; style=&quot;width:300px&quot;
			data-options=&quot;url:'propertygrid_data.json',showGroup:true,scrollbarSize:0&quot;&gt;&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>